<!DOCTYPE html>
<html lang="pt-br">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Language" content="pt-br">
    <meta name="color-scheme" content="light dark">

    
      <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; block-all-mixed-content; default-src 'self'; child-src 'self'; font-src 'self' https://fonts.gstatic.com https://cdn.jsdelivr.net/; form-action 'self'; frame-src 'self'; img-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/ https://cdn.jsdelivr.net/; script-src 'self' 'unsafe-inline' https://www.google-analytics.com; prefetch-src 'self'; connect-src 'self' https://www.google-analytics.com;">

    

    <meta name="author" content="João Ninguém">
    <meta name="description" content="Um guia rápido sobre utilizar KaTeX">
    <meta name="keywords" content="blog,desenvolvedor,pessoal">

    <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Configuração de Equações Matemáticas"/>
<meta name="twitter:description" content="Um guia rápido sobre utilizar KaTeX"/>

    <meta property="og:title" content="Configuração de Equações Matemáticas" />
<meta property="og:description" content="Um guia rápido sobre utilizar KaTeX" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.asueeer.com/pt-br/posts/math-typesetting/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2019-03-08T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-03-08T00:00:00+00:00" /><meta property="og:site_name" content="João Ninguém" />



    <title>
  Configuração de Equações Matemáticas · João Ninguém
</title>

    
      <link rel="canonical" href="https://www.asueeer.com/pt-br/posts/math-typesetting/">
    

    <link rel="preload" href="/fonts/forkawesome-webfont.woff2?v=1.2.0" as="font" type="font/woff2" crossorigin>

    
      
      
      <link rel="stylesheet" href="/css/coder.min.708686f8ab8176e91d44fcbe488a0fe0333b94f405cf18a52383d67ba22f0ccb.css" integrity="sha256-cIaG&#43;KuBdukdRPy&#43;SIoP4DM7lPQFzxilI4PWe6IvDMs=" crossorigin="anonymous" media="screen" />
    

    

    
      
        
        
        <link rel="stylesheet" href="/css/coder-dark.min.aa883b9ce35a8ff4a2a5008619005175e842bb18a8a9f9cc2bbcf44dab2d91fa.css" integrity="sha256-qog7nONaj/SipQCGGQBRdehCuxioqfnMK7z0Tastkfo=" crossorigin="anonymous" media="screen" />
      
    

    

    

    <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">

    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

    

    <meta name="generator" content="Hugo 0.88.1" />
  </head>

  
  
    
  
  <body class="preload-transitions colorscheme-auto"
        onload=""
  >
    
<div class="float-container">
    <a id="dark-mode-toggle" class="colorscheme-toggle">
        <i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
    </a>
</div>


    <main class="wrapper">
      <nav class="navigation">
  <section class="container">
    <a class="navigation-title" href="/pt-br">
      João Ninguém
    </a>
    
      <input type="checkbox" id="menu-toggle" />
      <label class="menu-button float-right" for="menu-toggle">
        <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
      </label>
      <ul class="navigation-list">
        
          
            <li class="navigation-item">
              <a class="navigation-link" href="/pt-br/about/">Sobre</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/pt-br/posts/">Blog</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/pt-br/projects/">Projetos</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/pt-br/contact/">Contato</a>
            </li>
          
        
        
          
          
          
            
              
                <li class="navigation-item menu-separator">
                  <span>|</span>
                </li>
                
              
              <li class="navigation-item">
                <a href="https://www.asueeer.com/posts/math-typesetting/">🇬🇧</a>
              </li>
            
          
        
      </ul>
    
  </section>
</nav>


      <div class="content">
        
  <section class="container post">
    <article>
      <header>
        <div class="post-title">
          <h1 class="title">
            <a class="title-link" href="https://www.asueeer.com/pt-br/posts/math-typesetting/">
              Configuração de Equações Matemáticas
            </a>
          </h1>
        </div>
        <div class="post-meta">
          <div class="date">
            <span class="posted-on">
              <i class="fa fa-calendar" aria-hidden="true"></i>
              <time datetime='2019-03-08T00:00:00Z'>
                March 8, 2019
              </time>
            </span>
            <span class="reading-time">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
              Um minuto de leitura
            </span>
          </div>
          
          
          
        </div>
      </header>

      <div>
        
        <p>Em um projeto Hugo as Notações Matemáticas podem ser usadas com a ajuda de bibliotecas JavaScript de terceiros.</p>
<p>Nesse exemplo usaremos o <a href="https://katex.org/">KaTeX</a>.</p>
<ul>
<li>Crie um partial template em <code>/layouts/partials/math.html</code></li>
<li>Dentro, utilize o <a href="https://katex.org/docs/autorender.html">Auto-render Extension</a> ou sirva os scripts localmente.</li>
<li>Inclua o partial nos seus templates da seguinte forma:</li>
</ul>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">{{ <span style="font-weight:bold">if</span> or .Params.math .Site.Params.math }}
{{ partial <span style="font-style:italic">&#34;math.html&#34;</span> . }}
{{ end }}
</code></pre></div><ul>
<li>Para ativar o KaTex globalmente defina o parâmetro <code>math</code> como <code>true</code> na confgiuração do projeto</li>
<li>Para ativar o KaTex em páginas específicas inclua o parâmetro <code>math: true</code> nos arquivos de conteúdo</li>
</ul>
<p><strong>Nota:</strong> Use a referência online <a href="https://katex.org/docs/supported.html">Supported TeX Functions</a> como base para criar notações matemáticas.</p>

<h3 id="examples">
  Examples
  <a class="heading-link" href="#examples">
    <i class="fa fa-link" aria-hidden="true"></i>
  </a>
</h3>

<p>Notação em bloco:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p>
      </div>


      <footer>
        


        
        
        
      </footer>
    </article>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <script>
    MathJax = {
      tex: {
        inlineMath: [
          ['$', '$'], ['\\(', '\\)']
        ],
        processEscapes: true,
        processEnvironments: true
      },
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
      }
    };
  </script>
  </section>

      </div>

      
  <footer class="footer">
    <section class="container">
      
        <p>Coloque algum texto aqui.</p>
      
      
        ©
        
          2019 -
        
        2021
         João Ninguém 
      
      
      
        
      
    </section>
  </footer>


    </main>

    
      
      <script src="/js/coder.min.03b17769f4f91ae35667e1f2a1ca8c16f50562576cf90ff32b3179926914daa5.js" integrity="sha256-A7F3afT5GuNWZ&#43;HyocqMFvUFYlds&#43;Q/zKzF5kmkU2qU="></script>
    

    

    

    

    

    

    

    

    
  </body>

</html>
